<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火影三人组</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="container">
        <div class="item left" data-color= "radial-gradient(#999,#293243)"><img src="./img/鸣人.png" width="100%" alt="鸣人"></div>
        <div class="item middle"data-color= "radial-gradient(#999,,#bc4641)"><img src="./img/佐助.png" width="100%" alt="佐助"></div>
        <div class="item right"data-color= "radial-gradient(#999,#cc6c0e)"><img src="./img/小樱.png" width="100%" alt="小樱"></div>
    </div>
</body>
<script>
    //获取元素
    const items = document.querySelectorAll('.item');
    //遍历绑定事件
    for (let i = 0; i < items.length; i++) {
        items[i].addEventListener('click', function () {
            //是被点击的元素处于中间位置
            this.classList.remove('left', 'middle', 'right');
            this.classList.add('middle');
            //修改背景颜色
            document.body.style.background = this.dataset.color; 
            //左侧元素变化
            let left  = this.previousElementSibling ?? items[items.length -1];//"??"的意思是如果前面为真,则取前面的
            left.classList.remove('left','middle','right');
            left.classList.add('left');
            //右侧元素变化
            let right = this.nextElementSibling ?? items[0];
            right.classList.remove(('left','middle','right'));
            right.classList.add('right');
        })
    }
</script>

</html>